<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="value"
      width="60%"
      :before-close="handleClose"
    >
      <!-- <span>{{ row }}</span> -->
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            【题型】： {{ row.questionType === 1 ? '多选' : '单选' }}
          </el-col>
          <el-col :span="6"> 【编号】：{{ row.id }} </el-col>
          <el-col :span="6">
            【难度】：{{ row.difficulty === 1 ? '简单' : '困难' }}
          </el-col>
          <el-col :span="6"> 【标签】：{{ row.directoryName }} </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"> 【学科】：{{ row.subjectName }} </el-col>
          <el-col :span="6"> 【目录】：{{ row.directoryName }} </el-col>
          <el-col :span="6"> 【方向】：{{ row.direction }} </el-col>
          <el-col :span="6">
            &nbsp;
          </el-col>
        </el-row>
        <hr />
        <el-row>
          【题干】：
          <span v-html="row.question"></span>
          <p>
            {{ row.questionType === 1 ? '多选' : '单选' }}
            选项：（以下选中的选项为正确答案）
          </p>
          <el-row
            ><el-radio
              class="option"
              @change="onclick"
              v-model="radio"
              v-for="item in row.options"
              :key="item.id"
              :label="item.isRight"
              >{{ item.title }}</el-radio
            ></el-row
          >
        </el-row>
        <hr />
        <el-row>
          【参考答案】：<el-button @click="showvideo = !showvideo"
            >视频讲解</el-button
          >
        </el-row>
        <el-row>
          <el-col>
            <video
              class="video"
              v-if="showvideo"
              :src="row.videoURL"
              autoplay
              controls="controls"
            ></video>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <span>【答案解析】：</span>
          <span class="tt" v-html="row.answer"></span>
          <!-- <el-col>【答案解析】：</el-col>
          <el-col> <span v-html="row.answer"></span></el-col> -->
        </el-row>
        <hr />
        <el-row> 【题目备注】：{{ row.remarks }} </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="4"><el-button @click="handleClose">关闭</el-button></el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getdetails } from '@/api/questions/list.js'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      showvideo: false,
      row: {},
      radio: 1
    }
  },
  created() {
    console.log(this.id)
    this.getdetails()
  },
  methods: {
    async getdetails() {
      const { data } = await getdetails(this.id)
      console.log(data)
      this.row = data
    },
    handleClose() {
      this.$emit('input', false)
    },
    onclick() {
      this.radio = 1
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.tt {
  display: inline-block;
}
.tt p {
  display: inline-block !important;
}
.option {
  display: block;
  margin: 10px;
}
video {
  width: 100%;
  height: 100%;
}
.video {
  height: 500px;
}
</style>
